<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英雄联盟官网</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body img:hover {
            opacity: 0.7;
        }

        .head {
            min-width: 1425px;
            max-width: 100%;
            height: 90px;
            background-color: black;
            display: flex;
            justify-content: space-between;
        }

        /* 设置顶部大盒子样式 */

        .logo {
            background-image: url(./素材/icon.png);
            width: 200px;
            height: 110px;
            overflow: hidden;
            background-position: 0px -27px;
            display: inline-block;
            margin: 6px 0 0 90px;
            z-index: 1;
        }

        /* 设置顶部左侧logo样式 */

        .one,
        .two,
        .three,
        .four,
        .five {
            display: inline-block;
            text-align: center;
            width: 80px;
            height: 90px;
            padding-top: 28px;
            margin: 0 10px 0 30px;
        }

        /* 设置顶部中间超链接外盒子的样式 */

        .Chinese {
            color: white;
            font: 700 17px 微软雅黑;
            text-decoration: none;
        }

        /* 设置顶部中文超链接的样式 */

        .Chinese:hover {
            color: blue;
        }

        /* 设置顶部中文超链接悬停样式 */

        .English {
            color: rgba(224, 221, 221, 0.87);
            text-decoration: none;
            font-size: 10px;
        }

        /* 设置顶部英文超链接样式 */

        .English:hover {
            color: blue;
        }

        /* 设置顶部英文超链接悬停样式 */

        .search {
            background-image: url(./素材/icon.png);
            width: 30px;
            height: 30px;
            display: inline-block;
            background-position: -8px 0px;
            margin-top: 30px;
        }

        /* 设置顶部图标超链接样式 */

        .phone {
            background-image: url(./素材/icon.png);
            width: 30px;
            height: 30px;
            display: inline-block;
            background-position: -36px 0px;
            overflow: hidden;
            margin-top: 30px;
        }

        /* 设置顶部图标超链接样式 */

        .denglu {
            width: 80px;
            height: 90px;
            position: relative;
        }

        /* 设置头像外大盒子样式 */

        .user {
            background-image: url(./素材/icon.png);
            width: 80px;
            height: 90px;
            overflow: hidden;
            background-position: 4px -160px;
            margin-left: 20px;
            position: absolute;
            z-index: 1;
        }

        /* 设置头像框样式 */

        .person {
            background-image: url(./素材/peron.png);
            width: 80px;
            height: 80px;
            background-position: 28px 14px;
            background-repeat: no-repeat;
            border-radius: 50%;
            position: absolute;
        }

        /* 设置头像样式 */

        .login {
            width: 300px;
            height: 90px;
            text-align: center;
            margin-top: 30px;
            margin-right: 30px;
        }

        .login p {
            color: white;
        }

        .loading {
            color: #f5d170;
        }

        .loading:hover {
            color: skyblue;
        }

        .login span {
            color: rgba(224, 221, 221, 0.87);
            font-size: 12px;
        }

        /* 设置顶部右侧登录样式 */

        .top {
            min-width: 1425px;
            min-height: 350px;
            background-image: url(./素材/bg-top.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        /* 设置顶部下方图片样式 */

        .versions {
            width: 300px;
            text-align: center;
            float: right;
            display: flex;
            position: absolute;
            bottom: 30px;
            right: 30px;
        }

        .versions p {
            color: #888787;
            font-size: 12px;
            margin-top: 10px;
        }

        .versions span {
            color: #f5d170;
            font-size: 14px;
            margin-top: 8px;
        }

        .verlink {
            width: 80px;
            height: 24px;
            border: 2px solid #f5d170;
            margin-left: 10px;
            margin-top: 2px;
        }

        .verlink a:link {
            color: #f5d170;
            text-decoration: none;
        }

        .verlink a:visited {
            color: #f5d170;
        }

        .verlink a:hover {
            color: skyblue;
            text-decoration: none;
        }

        /* 设置版本超链接样式 */

        .content {
            min-width: 1425px;
            height: 500px;
            background-image: url(./素材/bg-content-top.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }

        /* 设置内容栏的背景 */

        .nav {
            width: 1240px;
            height: 60px;
            display: flex;
            text-align: center;
            margin: 0 auto;
        }

        .nav a {
            display: inline-block;
            width: 150px;
            height: 60px;
            color: #333333;
            justify-content: flex-start;
            font-size: 20px;
            text-align: center;
            line-height: 60px;
            text-decoration: none;
        }

        .nav a:hover {
            color: #d1ab57;
            font-weight: 700;
            border-bottom: 2px solid #d1ab57;
        }

        /* 设置内容栏的导航栏样式 */

        .function {
            width: 1240px;
            height: 400px;
            display: flex;
            justify-content: space-between;
            margin: 20px auto;
        }

        .menu {
            width: 820px;
            height: 400px;
        }

        .skin {
            width: 820px;
            height: 347px;
            background-image: url(./素材/img01.jpg);
            background-repeat: no-repeat;
            background-size: contain;
        }

        .news {
            display: flex;
        }

        .news a {
            display: inline-block;
            width: 164px;
            height: 50px;
            text-align: center;
            color: white;
            background-color: black;
            line-height: 50px;
            font-size: 12px;
            text-decoration: none;
        }

        .news a:hover {
            color: #e9c06c;
            background-color: #303030;
        }

        /* 设置左侧轮播图（暂无）样式 */

        .options {
            width: 400px;
            height: 240px;
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
            align-items: center;
            margin-left: 1px;
            margin-top: 4px;
        }

        .options>div {
            width: 131px;
            height: 56px;
            display: flex;
        }

        .noobs {
            width: 30px;
            height: 30px;
            background-image: url(./素材/icon.png);
            overflow: hidden;
            background-position: -196px -2px;
            margin-left: 8px;
            margin-top: 14px;
        }

        .web {
            width: 28px;
            height: 30px;
            background-image: url(./素材/icon.png);
            overflow: hidden;
            background-position: -558px 0px;
            margin-top: 14px;
            margin-left: 9px;
        }

        .shop {
            width: 32px;
            height: 30px;
            background-image: url(./素材/icon.png);
            overflow: hidden;
            background-position: -586px 0px;
            margin-top: 14px;
            margin-left: 5px;
        }

        .client {
            width: 30px;
            height: 30px;
            background-image: url(./素材/icon.png);
            overflow: hidden;
            background-position: -376px 0px;
            margin-top: 13px;
            margin-left: 8px;
        }

        .canyon {
            width: 30px;
            height: 30px;
            background-image: url(./素材/icon.png);
            overflow: hidden;
            background-position: -647px 0px;
            margin-top: 13px;
            margin-left: 8px;
        }

        .cdk {
            width: 30px;
            height: 30px;
            background-image: url(./素材/icon.png);
            overflow: hidden;
            background-position: -287px 0px;
            margin-top: 13px;
            margin-left: 7px;
        }

        .rotate {
            width: 30px;
            height: 30px;
            background-image: url(./素材/icon.png);
            overflow: hidden;
            background-position: -618px 0px;
            margin-top: 13px;
            margin-left: 9px;
        }

        .gamedata {
            width: 30px;
            height: 30px;
            background-image: url(./素材/icon.png);
            overflow: hidden;
            background-position: -257px 0px;
            margin-top: 13px;
            margin-left: 9px;
        }

        .awardcenter {
            width: 30px;
            height: 30px;
            background-image: url(./素材/icon.png);
            overflow: hidden;
            background-position: -466px 0px;
            margin-top: 14px;
            margin-left: 7px;
        }

        .weibo {
            width: 30px;
            height: 30px;
            background-image: url(./素材/icon.png);
            overflow: hidden;
            background-position: -498px 0px;
            margin-top: 12px;
            margin-left: 9px;
        }

        .luntan {
            width: 30px;
            height: 30px;
            background-image: url(./素材/icon.png);
            overflow: hidden;
            background-position: -407px 0px;
            margin-top: 13px;
            margin-left: 8px;
        }

        .service {
            width: 30px;
            height: 30px;
            background-image: url(./素材/icon.png);
            overflow: hidden;
            background-position: -437px 0px;
            margin-top: 13px;
            margin-left: 8px;
        }

        .options div a {
            display: inline-block;
            margin-left: 10px;
            line-height: 56px;
            color: #555;
            text-decoration: none;
        }

        .options div a:hover {
            color: skyblue;
            font-weight: 700;
        }

        /* 设置选项栏中12个小盒子内部的样式 */

        .message {
            width: 1240px;
            height: 750px;
            display: flex;
            justify-content: space-between;
            margin: 20px auto;
        }

        .messageL {
            width: 820px;
            height: 750px;
        }

        .msgL1 {
            width: 820px;
            height: 50px;
            display: flex;
        }

        .msgL1 a {
            display: inline-block;
            width: 164px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            color: #333;
            text-decoration: none;
            border-bottom: 2px solid rgb(185, 184, 184);
        }

        .msgL1 a:hover {
            color: #d1ab57;
            font-weight: 700;
            border-bottom: 2px solid #d1ab57;
        }

        .msgL2 {
            width: 820px;
            height: 150px;
            background-image: url(./素材/pic-news9.jpg);
            background-repeat: no-repeat;
            background-position: left center;
            text-indent: 14em;
        }

        .msgL3 {
            width: 820px;
            height: 450px;
        }

        .tag {
            width: 68px;
            height: 35px;
            display: inline-block;
            background-color: rgba(231, 227, 227, 0.911);
            text-align: center;
            line-height: 35px;
            margin-top: 10px;
            border-radius: 5px;
        }

        .msgL3 a {
            display: inline-block;
            width: 640px;
            height: 35px;
            line-height: 35px;
            padding-left: 30px;
            color: #333;
            text-decoration: none;
        }

        .msgL3 a:hover {
            color: skyblue;
            font-weight: 700;
        }

        .time {
            width: 72px;
            height: 35px;
            display: inline-block;
            background-color: transparent;
            text-align: right;
            line-height: 35px;
        }

        .msgL4 {
            width: 820px;
            height: 50px;
            background-color: #ebebeb;
            margin-top: 15px;
            text-align: center;
            line-height: 50px;
        }

        .msgL4 a {
            display: inline-block;
            color: #d1ab57;
            text-decoration: none;
        }

        .msgL4 a:hover {
            color: skyblue;
            font-weight: 700;
        }

        /* 设置左侧信息栏的样式 */

        .messageR {
            width: 400px;
            height: 750px;
        }

        .msgR1 {
            width: 400px;
            height: 50px;
            display: flex;
        }

        .msgR1 a {
            display: inline-block;
            width: 134px;
            height: 50px;
            color: #333;
            text-decoration: none;
            text-align: center;
            line-height: 50px;
            border-bottom: 2px solid rgb(185, 184, 184);
        }

        .msgR1 a:hover {
            color: #d1ab57;
            font-weight: 700;
            border-bottom: 2px solid #d1ab57;
        }

        .skinpic {
            width: 400px;
            height: 420px;
            margin-top: 20px;
        }

        .skinpic img {
            margin-top: 5px;
        }

        .skinpic a:nth-child(even) {
            margin-right: 5px;
        }

        .skinpic p {
            text-align: right;
            font-size: 14px;
            color: #9f9f9f;
            margin-top: 5px;
        }

        .another {
            width: 400px;
            height: 120px;
            margin-top: 10px;
        }

        .another a img {
            margin-top: 30px;
        }

        .another a:nth-child(even) {
            margin-left: 5px;
        }

        .hint {
            width: 400px;
            height: 75px;
            display: flex;
        }

        .hint_img {
            width: 70px;
            height: 70px;
            background-image: url(./素材/icon.png);
            overflow: hidden;
            background-position: -330px -89px;
        }

        .hint_txt {
            width: 300px;
            height: 75px;
            display: inline-block;
            margin-left: 8px;
            margin-top: 5px;
        }

        .notice {
            font: 700 12px "微软雅黑";
            color: black;
        }

        .hint_txt p {
            color: #9f9f9f;
            font-size: 12px;
        }

        /* 设置右侧信息栏及其他部件的样式 */

        .show {
            width: 1240px;
            height: 250px;
            margin: 0 auto;
        }

        .show_nav {
            width: 1240px;
            height: 50px;
            display: flex;
            justify-content: flex-start;
            border-bottom: 2px solid rgb(187, 187, 187);
        }

        .show_nav a {
            width: 150px;
            height: 50px;
            display: inline-block;
            color: #333;
            text-align: center;
            text-decoration: none;
            line-height: 50px;
        }

        .show_nav a:hover {
            color: #d1ab57;
            border-bottom: 2px solid #d1ab57;
        }

        .show_video {
            width: 1240px;
            height: 120px;
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
        }

        .video1 {
            display: inline-block;
            width: 183px;
            height: 108px;
            background-image: url(./素材/video1.jpg);
            background-size: cover;
        }

        .video1:hover {
            opacity: 0.7;
        }

        .video_txt {
            width: 183px;
            height: 30px;
            display: inline-block;
            color: #999;
            text-decoration: none;
            font-size: 12px;
        }

        .video_txt:hover {
            color: skyblue;
        }

        .show_more {
            width: 1240px;
            height: 50px;
            background-color: #ebebeb;
            text-align: center;
            line-height: 50px;
            margin-top: 30px;
        }

        .show_more a {
            color: #d1ab57;
            text-decoration: none;
        }

        .show_more a:hover {
            color: skyblue;
        }

        .footer {
            min-width: 100%;
            min-height: 163px;
            background-image: url(./素材/bg-footer.jpg);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            margin-top: 50px;
        }

        .footer_txt {
            width: 500px;
            height: 90px;
            margin: 0 auto;
            padding-top: 40px;
        }

        .footer_txt a {
            color: skyblue;
            font-size: 12px;
            text-decoration: none;
        }

        .footer_txt p {
            color: #9f9f9f;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class="head">
        <!-- 设置顶部布局 -->
        <div class="logo"></div>
        <div class="one">
            <a href="#" target="_blank" class="Chinese">游戏资料</a>
            <a href="#" target="_blank" class="English">GAME INFO</a>

        </div>
        <div class="two">
            <a href="#" target="_blank" class="Chinese">商城/合作</a>
            <a href="#" target="_blank" class="English">STORE</a>
        </div>
        <div class="three">
            <a href="#" target="_blank" class="Chinese">用户互动</a>
            <a href="#" target="_blank" class="English">COMMUNITY</a>
        </div>
        <div class="four">
            <a href="#" target="_blank" class="Chinese">赛事中心</a>
            <a href="#" target="_blank" class="English">EVENTS</a>
        </div>
        <div class="five">
            <a href="#" target="_blank" class="Chinese">自助系统</a>
            <a href="#" target="_blank" class="English">SYSTEM</a>
        </div>
        <div>
            <a href="#" target="_blank" class="search"></a>
        </div>
        <div>
            <a href="#" target="_blank" class="phone"></a>
        </div>
        <div class="denglu">
            <div class="user"></div>
            <a href="#" target="_blank" class="person"></a>
        </div>
        <div class="login">
            <p>亲爱的召唤师，欢迎&nbsp;<a href="#" target="_blank" class="loading">登录</a></p>
            <span>登录后查看自己的战绩、资产、声望值等</span>
        </div>
    </div>
    <div class="top">
        <div class="versions">
            <p>当前游戏版本：</p>
            <span>Ver&nbsp;11.21</span>
            <div class="verlink"><a href="#">版本详情</a></div>
        </div>
    </div>
    <div class="content">
        <!-- 内容栏布局 -->
        <div class="nav">
            <a href="#" target="blank">综合资讯</a>
            <a href="#" target="blank">视频中心</a>
            <a href="#" target="blank">赛事中心</a>
            <a href="#" target="blank">活动中心</a>
        </div>
        <div class="function">
            <div class="menu">
                <!-- 设置左边的中号盒子 -->
                <div class="skin"></div>
                <div class="news">
                    <a href="#">魔法引擎上线</a>
                    <a href="#">总决赛卡片收集</a>
                    <a href="#">20点EDG&nbsp;VS&nbsp;DK</a>
                    <a href="#">制胜法则第四期</a>
                    <a href="#">《绽火·狂澜》</a>
                </div>
            </div>
            <div class="menu2">
                <!-- 设置右边的中号盒子 -->
                <video src="down.mp4" autoplay muted loop></video>
                <!-- <a href="#" class="download"><img src="./素材/video-img.png" alt=""></a> -->
                <div class="options">
                    <!-- 设置右边下侧的12个小盒子 -->
                    <div>
                        <div class="noobs"></div>
                        <a href="#">新手推荐</a>
                    </div>
                    <div>
                        <div class="web"></div>
                        <a href="#">宇宙官网</a>
                    </div>
                    <div>
                        <div class="shop"></div>
                        <a href="#">周边商城</a>
                    </div>
                    <div>
                        <div class="client"></div>
                        <a href="#">新客户端</a>
                    </div>
                    <div>
                        <div class="canyon"></div>
                        <a href="#">峡谷之巅</a>
                    </div>
                    <div>
                        <div class="cdk"></div>
                        <a href="#">CDK兑换</a>
                    </div>
                    <div>
                        <div class="rotate"></div>
                        <a href="#">轮换模式</a>
                    </div>
                    <div>
                        <div class="gamedata"></div>
                        <a href="#">游戏资料</a>
                    </div>
                    <div>
                        <div class="awardcenter"></div>
                        <a href="#">领奖中心</a>
                    </div>
                    <div>
                        <div class="weibo"></div>
                        <a href="#">官方微博</a>
                    </div>
                    <div>
                        <div class="luntan"></div>
                        <a href="#">玩家论坛</a>
                    </div>
                    <div>
                        <div class="service"></div>
                        <a href="#">在线客服</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="message">
        <!-- 内容栏下方信息栏布局 -->
        <div class="messageL">
            <div class="msgL1">
                <a href="#">最新资讯</a>
                <a href="#">综合新闻</a>
                <a href="#">官方公告</a>
                <a href="#">赛事新闻</a>
                <a href="#">论坛资讯</a>
            </div>
            <div class="msgL2">
                <h1>决赛在即，EDG能否战胜DK夺得冠军宝座</h1>
                <p>10月31日，EDG鏖战五局，最终以3:2的比分战胜GEN.G，挺进决赛</p>
            </div>
            <div class="msgL3">
                <span class="tag">新闻</span>
                <a href="#">双城之战宝典：4款全新皮肤免费领取</a>
                <span class="time">11-03</span>
                <span class="tag">新闻</span>
                <a href="#">云顶之弈：双城之战&nbsp;装备再发明</a>
                <span class="time">11-03</span>
                <span class="tag">新闻</span>
                <a href="#">云顶之弈：双城之战&nbsp;羁绊一图流</a>
                <span class="time">11-03</span>
                <span class="tag">新闻</span>
                <a href="#">庆"双城之战"部分限定皮肤限时销售</a>
                <span class="time">11-03</span>
                <span class="tag">新闻</span>
                <a href="#">虎牙大咖霸哥腿哥做客Soul畅聊S11</a>
                <span class="time">11-03</span>
                <span class="tag">新闻</span>
                <a href="#">2022&nbsp;季前赛：测试服预览</a>
                <span class="time">11-03</span>
                <span class="tag">新闻</span>
                <a href="#">【云顶之弈：双城之战】云顶宝典及其他</a>
                <span class="time">11-03</span>
                <span class="tag">新闻</span>
                <a href="#">bilibili英雄联盟创作者扶持计划</a>
                <span class="time">11-03</span>
                <span class="tag">新闻</span>
                <a href="#">不破不立召唤师集结&nbsp;Souler集结</a>
                <span class="time">11-03</span>
                <span class="tag">新闻</span>
                <a href="#">福星计划权益皮肤更新公告</a>
                <span class="time">11-03</span>
            </div>
            <div class="msgL4">
                <p>阅读更多<a href="#">最新资讯</a></p>
            </div>
        </div>
        <div class="messageR">
            <div class="msgR1">
                <a href="#">周免英雄</a>
                <a href="#">最新皮肤</a>
                <a href="#">最新英雄</a>
            </div>
            <div class="skinpic">
                <a href=""><img src="./素材/skin01.jpg" alt=""></a>
                <a href=""><img src="./素材/skin02.jpg" alt=""></a>
                <a href=""><img src="./素材/skin03.jpg" alt=""></a>
                <a href=""><img src="./素材/skin04.jpg" alt=""></a>
                <a href=""><img src="./素材/skin05.jpg" alt=""></a>
                <a href=""><img src="./素材/skin06.jpg" alt=""></a>
                <a href=""><img src="./素材/skin07.jpg" alt=""></a>
                <p>免费时间：2021-11-04日至2021-11-21日</p>
            </div>
            <div class="another">
                <a href=""><img src="./素材/pic-go-qt.jpg" alt=""></a>
                <a href=""><img src="./素材/pic-go-mall.jpg" alt=""></a>
            </div>
            <div class="hint">
                <div class="hint_img"></div>
                <div class="hint_txt">
                    <span class="notice">本游戏适合18岁（含）以上玩家娱乐</span>
                    <p>抵制不良游戏&nbsp;拒绝盗版游戏&nbsp;注意自我保护&nbsp;谨防上当受骗</p>
                    <p>适度游戏益脑&nbsp;沉迷游戏伤身&nbsp;合理安排时间&nbsp;享受健康生活</p>
                </div>
            </div>
        </div>
    </div>
    <div class="show">
        <div class="show_nav">
            <a href="#">最新推荐</a>
            <a href="#">视频推荐</a>
            <a href="#">活动推荐</a>
        </div>
        <div class="show_video">
            <div>
                <a href="" class="video1"></a>
                <a href="" class="video_txt">《S7鬼佬爱解说》：RNG暴打SSG，外国解说惨速打脸!</a>
            </div>
            <div>
                <a href=""><img src="./素材/video2.jpg" alt=""></a>
                <a href="" class="video_txt">7.20版本老司机：家妇制造者重做上线！</a>
            </div>
            <div>
                <a href=""><img src="./素材/video3.jpg" alt=""></a>
                <a href="" class="video_txt">《S7鬼佬爱解说》：入围赛WE称霸，惊艳外国解说</a>
            </div>
            <div>
                <a href=""><img src="./素材/video4.jpg" alt=""></a>
                <a href="" class="video_txt">《S7鬼佬爱解说》：外国解说称赞Uzi奇迹蜕变</a>
            </div>
            <div>
                <a href=""><img src="./素材/video5.jpg" alt=""></a>
                <a href="" class="video_txt">神级锐雯面对四人毅然反打！所有人都觉得她疯了！</a>
            </div>
            <div>
                <a href=""><img src="./素材/video6.jpg" alt=""></a>
                <a href="" class="video_txt">北美第一劫见血封喉，极限操作秒五杀</a>
            </div>
        </div>
        <div class="show_more">
            <p>阅读更多<a href="">最新资讯</a></p>
        </div>
    </div>
    <div class="footer">
        <div class="footer_txt">
            <a href="#">腾讯互动娱乐</a>
            <p>COPYRIGHT&nbsp;©&nbsp;2012 Riot Games,Inc.ALL RIGHTS RESERVED.</p>
            <p>COPYRIGHT&nbsp;©&nbsp;1998 - 2021 TENCENT.ALL RIGHTS RESERVED.</p>
            <p>文网进字[2011] 004号& ISBN 978-7-89989-145-2</p>
        </div>
    </div>
</body>

</html>